<div class="triangle"></div>
<div class="autocomplete-container">
  <div class="autocomplete-suggestions">
    <div class="autocomplete-results">
      <span>
        Autocompletion results for <span class="bold">"{{term}}"</span>
      </span>
      <span class="press-return">
        Press <span class="bold">RETURN</span> for full-text search, <span class="bold">TAB</span> for previews
      </span>
    </div>
    <div>
      {{#each suggestions}}
      <a href="{{link}}" class="autocomplete-suggestion" data-index="{{@index}}" tabindex="-1">
        <div class="title">
          {{# if deprecated }}
          <s><span class="header" translate="no">{{{title}}}</span></s>
          {{ else }}
          <span class="header" translate="no">{{{title}}}</span>
          {{/if}}

          {{#each labels}}
          <span class="label">{{this}}</span>
          {{/each}}
          <div class="autocomplete-preview-indicator autocomplete-preview-indicator-open">
            <button onclick="onTogglePreviewClick(event, false)" title="Close preview" tabindex="-1">
              <i class="ri-close-line" aria-hidden="true"></i>
              Close preview
            </button>
          </div>
          <div class="autocomplete-preview-indicator autocomplete-preview-indicator-closed">
            <button onclick="onTogglePreviewClick(event, true)" title="Open preview" tabindex="-1">
              <i class="ri-search-2-line" aria-hidden="true"></i>
              Open preview
            </button>
          </div>
        </div>

        {{#if description}}
        <div class="description" translate="no">
          {{{description}}}
        </div>
        {{/if}}
      </a>
      {{/each}}
    </div>
  </div>
</div>
